<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <title>加载 CSV 格式数据 - 全国 5A 景区</title>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div id="container" class="container"></div>
<div id="panel"></div>
<div id="sure" class="info" style="display: none">
    确定，并拍照取证
</div>
<div class="input-card" style="width:16rem">
    <h4>地图点击相关事件</h4>
    <h4 id="trash_data" th:text="${trash}" style="display: none"></h4>
    <div>
        <div class="input-item">
            <button id="clickOn" class="btn" style="margin-right:1rem;" onclick="selectPoint()">进行点标记</button>
            <button id="clickOff" class="btn" onclick="cancelPoint()">解绑事件</button>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    window._AMapSecurityConfig = { securityJsCode: 'bbbbaaa0cfeca5f5a0a1cbf4804adbec' };
</script>
<script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=33928abfdb4b49ebf2792f1e972b67fc&plugin=AMap.MapboxVectorTileLayer,AMap.Walking"></script>
<script src="https://webapi.amap.com/loca?v=2.0&key=33928abfdb4b49ebf2792f1e972b67fc"></script>

<script>
    var map = null;
    var walking = null;
    // 自定义读取csv的方法
    $.extend({
        csv: function (url, f) {
            $.get(url, function (record) {
                //按回车拆分
                record = record.split("\r\n");
                //第一行标题
                var title = record[0].split(",");
                //删除第一行
                record.shift();
                var data = [];
                for (var i = 0; i < record.length-1; i++) {//最后一行为空行也会被读取 -1
                    var t = record[i].split(",");
                    for (var y = 0; y < t.length; y++) {
                        if (!data[i]) data[i] = {};
                        data[i][title[y]] = t[y];
                    }
                }
                f.call(this, data);
                data = null;
            });
        }
    });
    let trash_data = $("#trash_data").text();
    $.csv(trash_data, function (data) {
        map = new AMap.Map('container', {
            center: [113.0319, 28.196944],
            zoom: 19,
            mapStyle: 'amap://styles/f7fa9c67485836d6e5105d0215bb0e33',
            showBuildingBlock: false,
            showIndoorMap: false,
            resizeEnable: true,
            showLabel: true,
            viewMode: '3D',
        });
        var loca = new Loca.Container({
            map,
        });
        var layer = new Loca.IconLayer({
            map: map,
        });
        var list = [];
        for (let i = 0; i < data.length; i++) {
            list.push({
                "type": "Feature",
                "properties": {
                    "name": i,
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [data[i]['经度'],data[i]['纬度']]
                }
            });
        }
        var new_data = {
            "type": "FeatureCollection",
            "features": list
        };
        var geo = new Loca.GeoJSONSource({
            data: new_data,
        });
        layer.setSource(geo);
        layer.setStyle({
            unit: 'px',
            icon: (index, feature) => {
                return 'https://4myblog.oss-cn-beijing.aliyuncs.com/treasure/bg/position-1.png?versionId=CAEQGhiBgMDdhta7gBgiIGY2OGM4Njc4ODNhNDRmMDY4NTEyNTNhM2E1ZWY3YmY2';
            },
            iconSize: [40,40],
            offset: [0, 0],
            rotation: 0,
        });
        loca.add(layer);
        layer.render();

        var walking = new AMap.Walking({
            map: map,
            panel: "panel"
        });

        map.on('click', (e) => {
            const feat = layer.queryFeature(e.pixel.toArray());
            console.log('feat', feat);
            if (feat){
                walking.search([113.0319, 28.196944], feat.coordinates, function(status, result) {
                    if (status === 'complete') {
                        log.success('绘制步行路线完成')
                    } else {
                        log.error('步行路线数据查询失败' + result)
                    }
                });
            }
        });

    });

    var marker = new AMap.Marker({
        position: new AMap.LngLat(113.0319,28.196993),
        offset: new AMap.Pixel(-10, -10),
        icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
    });
    var markers = [];
    markers.push(marker)
    // marker.hide();

    function mapMove(){
        var center = map.getCenter(); //获取当前地图级别
        marker.setPosition(new AMap.LngLat(center.lng,center.lat));
        $("#sure").text(center.toString()+"   "+"确定，并拍照取证")
    }
    function selectPoint() {
        map.setMapStyle('amap://styles/whitesmoke');
        map.on('mapmove', mapMove);
        $("#sure").show();
        map.add(markers)
    }
    function cancelPoint() {
        map.setMapStyle('amap://styles/f7fa9c67485836d6e5105d0215bb0e33');
        $("#sure").hide();
        map.remove(markers)
    }
    $("#sure").click(function () {
        callAndroid(map.getCenter().toString());
    })
    // 安卓方法
    function callAndroid(point){
        // 由于对象映射，所以调用test对象等于调用Android映射的对象
        window.androidFunction.getCamera(point);
    }

</script>


</html>